<template>
  <ph-view>
    <ph-divider>基本介绍</ph-divider>
    <ph-pretty>
      <pre>
import {PhInput} from "@/index"
interface Input{
    value:{type:[String,Number]},
    disabled:{type:Boolean}
}</pre
      >
    </ph-pretty>
    <div class="form">
      <div>
        <label>姓名</label>
        <ph-input :value="name" />
      </div>
      <div>
        <label>性别（禁止）</label>
        <ph-input :value="gender" :disabled="true" />
      </div>
    </div>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { PhInput, PhDivider, PhView } from "@/index";

export default defineComponent({
  components: {
    PhInput,
    PhDivider,
    PhView,
  },
  setup() {
    const formdata = reactive({
      name: "章三",
      gender: "男",
    });
    return {
      ...toRefs(formdata),
    };
  },
});
</script>
<style lang="scss">
.form {
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
